<template>
  <div class="page">
		<div class="center">
			<div class="el-breadcrumb">
				<el-breadcrumb separator-class="el-icon-arrow-right">
				  <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>应用列表</el-breadcrumb-item>
				  <el-breadcrumb-item>创建应用</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<el-row type="flex" class="app-form">
				<div style="width: 200px; height: 200px; background-color: aquamarine;">
					<div>
					    </div>
				</div>
				    

				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="bg-form-title">
						<span>创建应用</span>
					</div>
					<el-card class="box-card">
						<el-row>
							<el-col :span="24"><div class="app-title ">图标</div></el-col>
							<el-col :span="24">
								<img class="app-title-img" style="width: 50px; height: 50px;" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png">
							</el-col>
							<el-col :xs="24" :sm="12"><div class="app-note">挑选一个 emoji 作为应用的图标吧！</div></el-col>
						</el-row>
						<el-row>
							<el-col :span="24"><div class="app-title-st">应用名称</div></el-col>
							<el-col :xs="24" :sm="12" :md="16"><el-input class="app-set" v-model="input" placeholder="智能翻译助手"></el-input></el-col>
						</el-row>
						<el-row>
							<el-col :span="24"><div class="app-title-st">应用描述</div></el-col>
							<el-col :xs="24" :sm="12" :md="16">
								<el-input class="app-set"
								  type="textarea" :rows="3"
								  placeholder="这款 App 可以将任意语言的内容，翻译成中文"
								  v-model="textarea">
								</el-input>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24"><div class="app-title-st">指令</div></el-col>
							<el-col :xs="24" :sm="12" :md="16">
								<el-input class="app-set"
								  type="textarea" :rows="3"
								  placeholder="你是一个翻译官，无论接下来输入什么，你都要翻译成中文。内容是："
								  v-model="textarea">
								</el-input>
							</el-col>
							<el-col :xs="24" :sm="12" :md="16"><div class="app-note">指令需清晰易懂，明确且有逻辑。让 ChatGPT 化身你的小帮手吧。</div></el-col>
						</el-row>
						<el-row>
							<el-col :span="24"><div class="app-title-st">示例输入</div></el-col>
							<el-col :xs="24" :sm="12" :md="16">
								<el-input class="app-set app-set-bot"
								  type="input" 
								  placeholder="I love you three thousand times."
								  v-model="textarea">
								</el-input>
							</el-col>
						</el-row>
						<el-row>
						  
						  <el-col :xs="24" :sm="12" :md="16" style="float: right; text-align: center;">
							  <el-button round @click="toHome">取消</el-button>
							    <el-button type="warning" round>测试</el-button>
							    <el-button type="success" round>创建</el-button>
						  </el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</div>
  </div>
</template>
<script>
	

    export default {
        name: 'CreateApplication',
		components: {

		  },
        data () {
            return {
				squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            }
        },
		methods:{
			toHome(){
				this.$router.push({name: "Index"});
			},
			selectEmoji(emoji) {
			  console.log(emoji)
			}
			
		}
    }
</script>

<style scoped>
 @import '../../static/css/CreateApplication.css'
</style>